<template>
  <div>
    <public-header :headerData="headerData" :params="params"></public-header>
    <div v-if="articleStatus.status==1">
      <header class="article_header">
        <h1 v-html="articleData.formTitle"></h1>
        <div class="article_meta">
          <span v-html="new Date(articleData.date).format('yyyy-MM-dd hh:mm:ss')"></span>
          <span><i class="fa fa-eye" v-html="articleData.readNumber"></i>次浏览</span>
          <span><i class="fa fa fa-folder-open"></i>{{articleData.formClass}}</span>
        </div>
      </header>
      <article class="article_content">
        <div v-html="articleData.formText">
        </div>
        <p class="share" style="text-indent:0;">转载请注明本文标题和链接：《<a :href="this.$route.fullPath">{{articleData.formTitle}}</a>》</p>
      </article>
      <section class="comment-list">
        <div v-if="articleComment.status==1 && articleComment.data.length > 0">
          <dl v-for="item in articleComment.data" :key="item.id">
            <dt><span>{{new Date(item.cDate).format('yyyy-MM-dd hh:mm:ss')}}</span>{{item.nick}}说：</dt>
            <dd>{{item.cText}}</dd>
          </dl>
        </div>
        <dl v-else>
          <dl class="noComment">
            <dt>〒_〒</dt>
            <dd>暂无评论，来抢个沙发</dd>
          </dl>
        </dl>
      </section>
      <section class="comment">
        <h3>说两句</h3>
        <ul>
          <li><input type="text" name="" v-model.trim="nick" placeholder="昵称" id="nick"></li>
          <li><input type="text" name="" v-model.trim="url" placeholder="网址" id="url"></li>
        </ul>
        <p>
          <textarea rows="" cols="" v-model.trim="text" placeholder="写点啥吧！！！" id="text"></textarea>
        </p>
        <button v-on:click="submit">提交</button><span id="msg" v-if="commStatus">{{commAsg}}</span>
      </section>
    </div>
    <public-footer></public-footer>
  </div>
</template>

<script>
// 公用头部
import PublicHeader from '~/components/PublicHeader'
import PublicFooter from '~/components/PublicFooter'

// vue-ajax
import util from '~/util/serve'
export default {
  async asyncData ({ params, query }) {
    let activeParams = {
      id: params.id
    }
    const headerData = await util.server.get(util.domain.nav);
    const articleData = await util.server.get(util.domain.article,{params: activeParams})
    const commentData = await util.server.get(util.domain.comment,{params: activeParams})
    return {
      headerData:headerData.data,
      articleStatus: articleData.data,
      articleComment: commentData.data,
      articleData: articleData.data.data[0],
      params,
      query
    }
  },
  data(){
    return {
      id: null,
      readNumber: null,
      nick:null,  // 评论昵称
      url:null, // 评论网址
      text:null, // 评论内容
      commAsg:"", // 评论错误提示
      commStatus:false, //评论错误状态
      commTime : true,  // 评论时间相隔
    }
  },
  head () {
    return {
      title: `${this.articleData.formTitle} - 小明的前端随笔`,
      meta: [
        { hid: 'description', name: 'description', content: this.articleData.formAbout },
        { hid: 'keywords', name: 'keywords', content: `${this.articleData.formTag.join(' ')} ${this.articleData.formClass} 小明的前端随笔` }
      ]
    }
  },
  methods:{
    getActive(){
      //请求阅读记录
      util.server.get(util.domain.articleNumber,{params:{
        id:this.id,readNumber:this.readNumber
      }}).then(reset=>{
        console.log(reset)
      })
    },
    submit:function(){
        // 昵称验证
        if(this.nick==""||!this.nick){
          this.commStatus = true;
          this.commAsg = "至少写个昵称吧";
          return;
        }

        // 内容验证
        if(this.text==""||!this.text){
          this.commStatus = true;
          this.commAsg = "至少写个几个字吧";
          return;
        }else if(this.text.length<=3){
          this.commStatus = true;
          this.commAsg = "历害了，精简到这几个字也行？";
          return;
        }
        
        this.commStatus = false;

        // 提交评论
        if(this.commTime){
          let nick = this.nick;
          let cUrl = this.url;
          let cDate = new Date();
          let cText = this.text;
          let id = this.id;
          util.server.get(util.domain.addComment,{
            params:{
              nick,cUrl,cDate,cText,id
            }
          }).then(reset=>{
            // 提交回调
            this.articleComment.status = 1;
            this.articleComment.data.push({cUrl,nick,cDate,cText,commentId:id});
          });
          // 提交后清空内容及状态
          this.text = "";
          this.commTime = false;
        }else{
          this.commStatus = true;
          this.commAsg = "闪电般的评论速度啊 >.<   喝杯茶在评论吧！";
        }
        let _this = this;
        setTimeout(function(obj){
          obj.commTime = true;
        },1000*60*5,_this);
      }
  },
  mounted(){
    this.id = this.articleData._id
    this.readNumber = this.articleData.readNumber
    this.getActive();
  },
  components: {
    PublicHeader,
    PublicFooter
  }
}
</script>

<style lang="less">
 /*引用reset.css*/
@import '~/assets/css/prism.css';
/*文章详情*/
.article_header {margin-bottom:1px;padding:2px 20px 12px;background-color:#fbfbfb;}
.article_header h1 {font-size:30px;padding:5px 0 8px 0;margin:5px auto;line-height:35px;font-weight:normal;}
.article_header h1 a {color:#333;}
.article_meta span {display:inline-block;padding:0 10px 2px 0;color:#999;font-size:13px;}
.article_meta .fa {font-size:14px;color:#bbb}
.article_meta span a {color:#00a2ca;}
.article_content {line-height:25px;word-break:break-all;word-wrap:break-word;position:relative;padding:20px;background-color:#fff; font-size: 14px;}
.article_content h2{ padding: 10px; padding-left: 0; font-size: 20px;}
.article_content h3{ padding: 5px; font-size: 18px;}
.article_content ul{ padding-left: 2em;}
.article_content ul li{list-style-type:disc;}
.article_content ul li a{ color: #00a2ca; font-size: 14px;}
.article_content a{ font-size: 18px !important; font-weight: bold; color: #00a2ca; padding: 5px 0;}
.article_content table{ border:none; border-collapse: collapse;}
.article_content table td{ border:1px solid #dfdfdf; padding: 5px 10px;}
.article_content table thead{ background: #f7fdff;}
.article_content .share{ border-top: 1px dashed #dbdbdb; font-size: 12px; padding-top: 5px; margin-top: 25px;}
.article_content .share a{ font-size: 12px !important; font-weight: 200;}
.article_content img{ max-width: 100%;}

/*评论*/
.comment{ overflow:hidden; padding: 0px 0; padding-bottom: 20px;}
.comment h3{ font-size: 16px; background: #fbfbfb; line-height: 35px; padding-top: 15px; border-bottom:1px solid #e8e7e7; padding: 0 10px;}
.comment ul{ overflow: hidden; margin-top: 10px;}
.comment li{ width: 50%; float:left; padding: 0 10px; box-sizing: border-box;}
.comment input{ width: 100%; font-size: 14px; border:1px solid #e8e7e7; box-sizing: border-box; padding: 0 10px; line-height: 30px;}
.comment p{ overflow: hidden; padding: 10px;}
.comment p textarea{ width: 100%; border: 1px solid #e8e7e7; height: 100px; outline: none; padding: 10px; box-sizing: border-box; font-size: 14px;}
.comment button{ width: 100px; line-height: 25px; font-size: 14px; border:1px solid #e8e7e7; margin-left: 15px; background: #fff;}
#msg{ color: red; padding-left: 10px;}

.comment-list{ overflow: hidden; padding: 10px; padding-bottom: 0;}
.comment-list dt{ font-size: 16px; line-height: 35px; padding: 10px 0;}
.comment-list dt span{ float: right; font-size: 14px; color: #999; font-weight: 200;}
.comment-list dd{ font-size: 14px; border-bottom:1px solid #dfdfdf; padding-bottom: 15px;}
.comment-list dl:last-child dd{ border-bottom: none;}
.noComment{ text-align: center; padding: 0 0 15px 0;}
.noComment dt { font-size: 36px; line-height: 55px; color: #999; font-weight: 200;}
.noComment dd{ font-size: 14px; font-weight: 200; color: #999; padding: 10px 0; border-bottom: none;}

/*--- 加载进度条样式 ---*/
/*.spinner{margin:0 auto; width:100%; height: 50px; background-color: #fff; text-align:center;font-size:0.6rem;padding-top:20%; z-index: 99999; text-align: center;}*/
.spinner>div{background-color:#00a2ca;height:50px;width:3px;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out;margin:0 0.075rem; border-radius: 10px;}
/*.spinner>p{padding-top:0.375rem;color:#666;}*/
.spinner{ width: 100%; text-align: center; margin: 20px 0}
.spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s;}
.spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}
.spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}
@-webkit-keyframes stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4);}
20%{-webkit-transform:scaleY(1.0);}
}
@keyframes stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4);}
20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0);}
}
</style>
